<template>
	<div class="_container" style="height: auto;overflow: hidden;padding: 15px;">
		<!--工具栏-->
		<el-card shadow="hover" style="margin-bottom: 15px;">
			<div>
				<el-row style="line-height: 40px;">
					<el-col :span="4" :xs="20" class="_search-box">
						<div style="float: left;width: 60px;">
							<span class="span-size">关键字：</span>
						</div>
						<el-input placeholder="请输入关键字" style="width: 50%;margin-left: 10px;" v-model="inputValue"></el-input>
					</el-col>
					<el-col :span="5" :xs="24" class="_search-box">
						<div style="float: left;width: 70px;">
							<span class="span-size">日期查询：</span>
						</div>
						<el-date-picker
							v-model="dateValue"
							type="daterange"
							align="right"
							unlink-panels
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="pickerOptions"
							style="width: 70%;margin-left: 10px;"
						></el-date-picker>
					</el-col>
					<el-col :span="5" :xs="24" class="_search-box">
						<div style="float: left;width: 60px;">
							<span class="span-size">关键字：</span>
						</div>
						<el-input placeholder="请输入关键字" style="width: 50%;margin-left: 10px;" v-model="inputValue1"></el-input>
					</el-col>
					<el-col :span="5" :xs="24" class="_search-box">
						<div style="float: left;width: 60px;">
							<span class="span-size">关键字：</span>
						</div>
						<el-input placeholder="请输入关键字" style="width: 50%;margin-left: 10px;" v-model="inputValue1"></el-input>
					</el-col>
					<el-col :span="4" :xs="24" class="_search-box">
						<div style="width: 100%;text-align: right;">
							<el-button icon="el-icon-refresh-left">重置</el-button>
							<el-button type="primary" icon="el-icon-search">查询</el-button>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<el-card shadow="hover">
			<div style="width: 100%;margin-top: 10px;">
				<el-row>
					<el-col :span="12" style="text-align: right;">
						<el-button-group style="float: left;">
							<el-button size="mini" type="primary" @click="$refs.pageForm.dialogFormVisible = true">新增</el-button>
							<el-button size="mini" type="danger" @click="goToLink">推送</el-button>
						</el-button-group>
					</el-col>
				</el-row>
			</div>
			<div style="margin: 24px 0;">
				<el-divider>查询结果</el-divider>
			</div>
			<div style="margin-bottom: 15px;">
				<el-table :data="tableData" ref="multipleTable" stripe>
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column prop="company" label="单位"></el-table-column>
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="idCardNum" label="身份证号"></el-table-column>
					<el-table-column prop="sex" label="性别"></el-table-column>
					<el-table-column prop="age" label="年龄"></el-table-column>
					<el-table-column prop="nation" label="民族"></el-table-column>
					<el-table-column prop="nativePlace" label="籍贯"></el-table-column>
					<el-table-column prop="address" label="出生地"></el-table-column>
          <el-table-column prop="professionalTitle" label="职称"></el-table-column>
          <el-table-column prop="postLevel" label="岗位等级"></el-table-column>
          <el-table-column prop="salaryLevel" label="薪级等级"></el-table-column>
					<el-table-column prop="phoneNumber" label="电话"></el-table-column>
					<el-table-column prop="email" label="邮箱"></el-table-column>
					<el-table-column prop="yearOfEntry" label="入职年份"></el-table-column>
					<el-table-column fixed="right" label="操作" width="100">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
							<el-button type="text" size="small">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<nav style="text-align: center">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[100, 200, 300, 400]"
					:page-size="100"
					layout="total, sizes, prev, pager, next, jumper"
					:total="400"
				></el-pagination>
			</nav>
		</el-card>
		<pageForm ref="pageForm"></pageForm>
	</div>
</template>
<script>
import pageForm from './pageForm.vue'
export default {
	components: {
		pageForm
	},
	data() {
		return {
			switchValue: true,
			dateValue: '',
			inputValue: '',
			inputValue1: '',
			currentPage: 1, //当前页
			pickerOptions: {
				shortcuts: [
					{
						text: '最近一周',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit('pick', [start, end])
						}
					},
					{
						text: '最近一个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							picker.$emit('pick', [start, end])
						}
					},
					{
						text: '最近三个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							picker.$emit('pick', [start, end])
						}
					}
				]
			},
			tableData: [
				{
					company: '上海市时代中学',
					name: '孙晓澐',
					idCardNum: '11080119681001419',
					sex: '女',
					age: 50,
					nation: '汉族',
					nativePlace: '天津市和平区',
					address: '天津市',
					professionalTitle: '一级教师',
					postLevel: '专技八级',
					salaryLevel: '35级',
					phoneNumber: '14917484229',
					email: '14917484229@xx.com',
					yearOfEntry: 2015
				},
				{
					company: '上海市闸北第八中学',
					name: '梁波',
					idCardNum: '1108021966082201X',
					sex: '男',
					age: 52,
					nation: '汉族',
					nativePlace: '安徽省宿县地区',
					address: '内蒙古',
					professionalTitle: '一级教师',
					postLevel: '专技八级',
					salaryLevel: '35级',
					phoneNumber: '12912761271',
					email: '12912761271@xx.com',
					yearOfEntry: 2019
				},
				{
					company: '上海市青云中学',
					name: '沈塞',
					idCardNum: '11080219670528217',
					sex: '女',
					age: 51,
					nation: '汉族',
					nativePlace: '内蒙古自治区呼和浩特市',
					address: '内蒙古',
					professionalTitle: '高级教师',
					postLevel: '专技六级',
					salaryLevel: '31级',
					phoneNumber: '14881979877',
					email: '14881979877@xx.com',
					yearOfEntry: 2015
				},
				{
					company: '上海市风华中学',
					name: '王素平',
					idCardNum: '11080219671203115',
					sex: '女',
					age: 51,
					nation: '汉族',
					nativePlace: '河北省保定地区定州市',
					address: '河北省',
					professionalTitle: '高级教师',
					postLevel: '专技六级',
					salaryLevel: '36级',
					phoneNumber: '14917177762',
					email: '14917177762@xx.com',
					yearOfEntry: 2018
				},
				{
					company: '上海市静安区大宁国际学校',
					name: '祝丽',
					idCardNum: '11080219680311612',
					sex: '女',
					age: 50,
					nation: '汉族',
					nativePlace: '江苏省无锡市',
					address: '山西省',
					professionalTitle: '高级教师',
					postLevel: '专技六级',
					salaryLevel: '34级',
					phoneNumber: '16212114492',
					email: '16212114492@xx.com',
					yearOfEntry: 2015
				},
				{
					company: '上海市向东中学',
					name: '李素芳',
					idCardNum: '11080219680412013',
					sex: '女',
					age: 50,
					nation: '汉族',
					nativePlace: '山西省大同市城区',
					address: '山西省',
					professionalTitle: '高级教师',
					postLevel: '专技七级',
					salaryLevel: '32级',
					phoneNumber: '14918468996',
					email: '14918468996@xx.com',
					yearOfEntry: 2015
				},
				{
					company: '上海市青云中学',
					name: '靖莉',
					idCardNum: '11080219681226013',
					sex: '女',
					age: 50,
					nation: '汉族',
					nativePlace: '天津市和平区',
					address: '河北省',
					professionalTitle: '高级教师',
					postLevel: '专技六级',
					salaryLevel: '35级',
					phoneNumber: '14218721496',
					email: '14218721496@xx.com',
					yearOfEntry: 2015
				},
				{
					company: '上海市新中高级中学',
					name: '朱艳',
					idCardNum: '11080219690205210',
					sex: '女',
					age: 50,
					nation: '汉族',
					nativePlace: '辽宁省',
					address: '辽宁省',
					professionalTitle: '高级教师',
					postLevel: '专技六级',
					salaryLevel: '33级',
					phoneNumber: '14881812661',
					email: '14881812661@xx.com',
					yearOfEntry: 2016
				},
				{
					company: '上海大学市北附属中学',
					name: '商会敏',
					idCardNum: '11080219690615011',
					sex: '女',
					age: 49,
					nation: '汉族',
					nativePlace: '河北省邯郸市邯山区',
					address: '河北省',
					professionalTitle: '高级教师',
					postLevel: '专技五级',
					salaryLevel: '36级',
					phoneNumber: '14684442962',
					email: '14684442962@xx.com',
					yearOfEntry: 2017
				},
				{
					company: '上海市市北中学',
					name: '石丽静',
					idCardNum: '11080219690909015',
					sex: '女',
					age: 49,
					nation: '汉族',
					nativePlace: '北京市顺义县',
					address: '北京市',
					professionalTitle: '高级教师',
					postLevel: '专技七级',
					salaryLevel: '31级',
					phoneNumber: '61278212',
					email: '61278212@xx.com',
					yearOfEntry: 2019
				}
			]
		}
	},
	methods: {
    onSubmit() {},
    goToLink() {
      this.$router.push('/page/pageDetail')
    },
		handleSizeChange(param) {
			console.log(param)
		},
		handleCurrentChange(param) {
			console.log(param)
		},
		handleClick(row) {
			console.log(row)
		}
	}
}
</script>
<style scoped>
.span-size {
  font-size: 14px;
}
</style>
